/*
 * 日期选择框
 * name placeholder Name
 * onChange 放在FormItem 下自动传过来的方法，在Form表单里使用无需传值
 **/

import React from 'react';
import { DatePicker } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import { IRangePicker } from './type';

moment.locale('zh-cn');

const RangePicker: any = DatePicker.RangePicker;

const Index: React.FC<IRangePicker> = ({ name, onChange, value }) => {
  const timeDataHandler = (data: any) => {
    if (data && !!onChange) {
      onChange(data);
    }
  };

  return (
    <>
      <div>
        <RangePicker
          onChange={(e: any) => timeDataHandler(e)}
          locale={locale}
          value={value ?? null}
          style={{ width: '100%' }}
          placeholder={
            name ? [`${name}开始`, `${name}结束`] : ['开始时间', '结束时间']
          }
          ranges={{
            今天: [moment(), moment()],
            本周: [moment().startOf('week'), moment().endOf('week')],
            本月: [moment().startOf('month'), moment().endOf('month')],
            本年: [moment().startOf('year'), moment().endOf('year')],
          }}
        />
      </div>
    </>
  );
};

export default Index;
